<template>
  <div>
    <h1 style="color: white ">供销存管理系统</h1>
    <h2>XF management system</h2>
    <el-card style="width: 600px;height: 350px;margin: 0 auto;background-color: rgba(255,255,255,0.6)">
      <el-form label-width="60px" style="width: 400px;margin: 50px auto">
        <el-form-item label="用户名">
          <el-input type="text" v-model="user.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" v-model="user.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="user.rem">记住用户名和密码</el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button style="position: relative;right: 25px" type="primary" @click="login()">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user:{username:"",password:"",rem:false}
    };
  },
  methods: {
    login(){
      let info = this.qs.stringify(this.user);
      let url = 'http://localhost:8080/users/login'
      this.axios.post(url,info).then((response)=>{
        if (response.data.state==20000){
          localStorage.setItem('jwt',response.data.data)
          location.href='/sys-admin';
        }else{
          this.$message.error(response.data.message);
        }
      })
    },
    rememberInfo(){
      let arr = document.cookie.split(";");
      console.log("arr>>>>"+document.cookie)
      for (let cookie of arr) {
        let cookieArr=cookie.split("=");
        let name = cookieArr[0].trim();
        let value = cookieArr[1];
        if (name=="username"){
          this.user.username=value;
        }else if (name=="password"){
          this.user.password=value;
        }
      }
    }
  },
  mounted() {
    this.rememberInfo();
  }
}
</script>

<style>
body{
  margin: 0;
  background-image: url("../assets/background.jpg");
  background-size: cover;/*设置封面*/
  text-align: center;
}
h1{
  font-size: 72px;
  color: #0096dc;
  margin-bottom: 0;
}
img{
  width: 100px;
}
h2{
  font-size: 32px;
  color: #0096dc;
  margin-bottom: 0;
}
</style>
